<template>
  <el-container>
    <el-main>
        <el-row>
            <el-col :span="22" :offset="1">
                <el-steps :active="step" finish-status="success" simple >
                    <el-step title="1.数据库信息">
                    </el-step>
                    <el-step title="2.选择本地保存目录">
                    </el-step>
                    <el-step title="3.任务配置">
                    </el-step>
                    <el-step title="3.确认">
                    </el-step>
                </el-steps>    
            </el-col>
        </el-row>

      <el-row>
        <el-col :span="10" :offset="4">
          <el-form :model="taskform" size="mini" label-width="180px" >
            <el-form-item
              v-if="step===0"
              label="数据库类型"
              prop="dbtype"
              :rules="[{required:true,message:'请选择类型名称',trigger:'blur'}]"
            >
              <el-select v-model="taskform.dbtype" placeholder="请选择">
                <el-option
                  v-for="item in $public.sqltypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="SQL地址"
              prop="host" 
              :rules="[{required:true,message:'请输入主机地址',trigger:'blur'}]"
              v-if="step===0 && (taskform.dbtype === 'mysql' || taskform.dbtype === 'mssql' || taskform.dbtype === 'postgres')"
            >
              <el-input v-model="taskform.host"></el-input>
            </el-form-item>
            <el-form-item
              label="SQL端口"
              prop="port"
              :rules="[{required:true,message:'请输入主机端口',trigger:'blur'}]"
              v-if="step===0 && (taskform.dbtype === 'mysql' || taskform.dbtype === 'mssql' || taskform.dbtype === 'postgres')"
            >
              <el-input v-model="taskform.port"></el-input>
            </el-form-item>
            <el-form-item
              label="SQL用户名"
              prop="user"
              :rules="[{required:true,message:'请输入用户名',trigger:'blur'}]"
              v-if="step===0 && (taskform.dbtype === 'mysql' || taskform.dbtype === 'mssql' || taskform.dbtype === 'postgres')"
            >
              <el-input v-model="taskform.user"></el-input>
            </el-form-item>
            <el-form-item
              label="SQL密码"
              prop="password"
              :rules="[{required:true,message:'请输入密码',trigger:'blur'}]"
              v-if="step===0 && (taskform.dbtype === 'mysql' || taskform.dbtype === 'mssql' || taskform.dbtype === 'postgres')"
            >
              
              <el-input v-model="taskform.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="字符编码" v-if="taskform.dbtype === 'mysql' && step===0">
              <el-select v-model="taskform.char" placeholder="请选择">
                <el-option
                  v-for="item in $public.chars"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="数据库名"
              prop="dbname"
              :rules="[{required:true,message:'请输入数据库名',trigger:'blur'}]"
              v-if="step===0 && (taskform.dbtype === 'mssql' || taskform.dbtype === 'postgres')"
            >
              <el-input v-model="taskform.dbname"></el-input>
            </el-form-item>
            <el-form-item
              label="数据库名"
              prop="dbname"
              :rules="[{required:true,message:'请输入数据库名',trigger:'blur'}]"
              v-if="step===0 && taskform.dbtype === 'mysql'"
            >
            <el-button type="success" @click="getdb">选择数据库</el-button>
              <ul v-if="taskform.dbnames.length>0">
                <li v-for="item in taskform.dbnames" :key="item">{{item}}</li>
              </ul>
            </el-form-item>
            
            <el-form-item
              label="数据库路径"
              prop="dbpath"
              :rules="[{required:true,message:'请选择数据库路径',trigger:'blur'}]"
              v-if="taskform.dbtype === 'sqlite' && step===0"
            >
              <el-input v-model="taskform.dbpath" :disabled="true">
                <el-button slot="append" icon="el-icon-search" @click="enableDirSearch('dbpath')"></el-button>
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="step===1"
              label="本地保存路径"
              prop="savepath"
              :rules="[{required:true,message: '请输入保存路径', trigger: 'blur' }]"
            >
            <el-tree :props="props" :load="loadNode" :check-on-click-node="true" lazy ref="tree" node-key="path" @check="nodeClick" show-checkbox :check-strictly="true" ></el-tree>
            </el-form-item>
            <el-form-item label="是否加密" v-if="step===1">
              <el-switch v-model="enablezippwd"></el-switch>
            </el-form-item>
            <el-form-item label="压缩密码" v-if="enablezippwd && step===1">
              <el-input v-model="taskform.zippwd" show-password></el-input>
            </el-form-item>
            <el-form-item label="远程存储" v-if="step===2">
              <el-select v-model="taskform.rs" multiple>
                <el-option
                  v-for="item in remotestorages"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="执行频率" v-if="step===2">
              <el-select v-model="pinlv" @change="changepinlv">
                <el-option
                  v-for="item in $public.pinlvs"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期" v-if="pinlv === 'month' && step===2">
              <el-select v-model="day" placeholder="请选择" @change="cjobs">
                <el-option
                  v-for="item in $public.days"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="周" v-if="pinlv === 'week' && step===2">
              <el-select v-model="week" placeholder="请选择" @change="cjobs">
                <el-option
                  v-for="item in $public.weeks"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间点" v-if="step===2">
              <el-time-picker
                v-model="times"
                placeholder="任意时间点"
                @change="createjobs"
                value-format="H m s"
              ></el-time-picker>
            </el-form-item>
            <el-form-item
              v-if="step===2"
              label="计划任务"
              prop="crontab"
              :rules="[
                        { required: true, message: '请输入 计划任务', trigger: 'blur' }
                    ]"
            >
              <el-input v-model="taskform.crontab"></el-input>
            </el-form-item>
            <el-form-item label="本地备份保留数" v-if="step===2">
              <el-input-number v-model="taskform.expire" :min="1" :max="100"></el-input-number>个
            </el-form-item>
            <el-form-item v-if="step!==3">
              <el-button @click="stepCut" v-if="step>0" size="mini">上一步</el-button>
              <el-button @click="stepPlus" v-if="step<4" size="mini">下一步</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row v-if="step===3">
        <el-col :span="20" :offset="1">
            <el-descriptions title="数据库信息" border  style="margin-top:15px" size="mini" direction="vertical">
                <el-descriptions-item label="数据库类型">{{taskform.dbtype}}</el-descriptions-item>
                <el-descriptions-item label="SQL地址">{{taskform.host}}</el-descriptions-item>
                <el-descriptions-item label="SQL端口">{{taskform.port}}</el-descriptions-item>
                <el-descriptions-item label="SQL用户名">{{taskform.user}}</el-descriptions-item>
                <el-descriptions-item label="SQL密码">{{taskform.password}}</el-descriptions-item>
                <el-descriptions-item label="数据库" v-if="taskform.dbtype!=='mysql'">{{taskform.dbname}}</el-descriptions-item>
                <el-descriptions-item label="数据库" v-else>
                    <el-tag v-for="item in taskform.dbnames" :key="item" size="mini" style="margin-right:5px">{{item}}</el-tag>
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="本地保存目录" border style="margin-top:15px"  size="mini" direction="vertical">
                <el-descriptions-item label="本地保存目录" >{{taskform.savepath}}</el-descriptions-item>
                <el-descriptions-item label="压缩密码" v-if="enablezippwd">{{taskform.zippwd}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="任务配置" border style="margin-top:15px"  size="mini" direction="vertical">
                <el-descriptions-item label="远程存储" v-if="taskform.rs.length>0">
                    <el-select v-model="taskform.rs" multiple disabled size="mini">
                        <el-option
                        v-for="item in remotestorages"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        ></el-option>
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="执行频率">{{$public.pinlvFmt(pinlv)}}</el-descriptions-item>
                <el-descriptions-item label="日期" v-if="pinlv === 'month'">{{day}}</el-descriptions-item>
                <el-descriptions-item label="周" v-if="pinlv === 'week'">{{week}}</el-descriptions-item>
                <el-descriptions-item label="时间点">{{$public.timesFmt(times)}}</el-descriptions-item>
                <el-descriptions-item label="计划任务">{{taskform.crontab}}</el-descriptions-item>
                <el-descriptions-item label="本地备份保留数">{{taskform.expire}}</el-descriptions-item>
            </el-descriptions>
        </el-col>
        <el-col :span="20" :offset="1" style="margin-top:15px">
            <el-button @click="stepCut" v-if="step===3" size="mini">上一步</el-button>
            <el-button type="success"  size="mini" @click="addtask">确定</el-button>
        </el-col>
      </el-row>

        <el-dialog title="选择数据库" :visible.sync="dialogTableVisible">
            <el-select v-model="taskform.dbnames" multiple placeholder="请选择">
            <el-option
            v-for="item in dbnames"
            :key="item"
            :label="item"
            :value="item">
            </el-option>
        </el-select>
        </el-dialog>

    </el-main>
  </el-container>
</template>
<script>

export default {
  data() {
    return {
        dialogTableVisible:false,
      step:0,
      taskform: {
        dbtype:"mysql",
        char: "utf8",
        port: "",
        crontab: "",
        rs: [],
        pause: "no",
        expire: 1,
        savepath:"",
        dbnames:[]
      },
      day: "1",
      week: "1",
      times: "",
      pinlv: "day",
      enablezippwd: false,
      remotestorages: [],
      rowid:"",
      path:"",
      props: {
        label: "label",
        children: "children",
        isLeaf: "isLeaf",
        path: "path",
      },
      dbnames:[]
    };
  },
  created() {
    this.ftpGet();
  },
  methods: {
      getdb(){
        this.dialogTableVisible=true
        this.$http.Get(this.$api.getdbinfo,{User:this.taskform.user,Password:this.taskform.password,Host:this.taskform.host,Port:this.taskform.port,Char:this.taskform.char},(res)=>{
            this.dbnames=res
        })
      },
    nodeClick(data) {
        this.$refs.tree.setCheckedNodes([data]);
      this.taskform.savepath=data.path;
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.$http.Get(this.$api.dirlist, {}, (res) => {
          return resolve(res);
        });
      } else {
        this.$http.Get(
          this.$api.dirlist,
          { dir: node.data.path },
          (res) => {
            return resolve(res);
          }
        );
      }
    },
      stepCut(){
          this.step=this.step-1
          console.log(this.step)
      },
      stepPlus(){
          this.step=this.step+1
          console.log(this.step)
      },
    ftpGet() {
      this.$http.Get(this.$api.ftps, { page: 1, count: -1 }, (res) => {
        this.remotestorages = res.data;
      });
    },
    changepinlv(e) {
      this.pinlv = e;
      this.cjobs();
    },
    createjobs(e) {
      this.times = e;
      this.cjobs();
    },
    addtask() {
      this.$http.Post(
        this.$api.task,
        this.taskform,
        () => {
          this.$router.go(-1)
        },
        "添加任务"
      );
    },
    cjobs() {
      var arrtimes = this.times.split(" ");
      var crontabstr = "";
      if (arrtimes.length === 3) {
        crontabstr = arrtimes[2] + " " + arrtimes[1] + " " + arrtimes[0];
        if (this.pinlv === "month" && this.day) {
          crontabstr = crontabstr + " " + this.day + " * *";
        } else if (this.pinlv === "week" && this.week) {
          crontabstr = crontabstr + " * * " + this.week;
        } else {
          crontabstr = crontabstr + " * * *";
        }
      }
      this.taskform.crontab = crontabstr;
    },
  },
};
</script>